<template>
	<!-- 弹窗区域 -->
	<uni-popup :safe-area="true" ref="popup" background-color="#fff">
		<!-- 弹窗内容区域 -->
		<view class="popup-content">
			<view class="popup-top">
				<view></view>  <!-- 占位符 -->
				<text class="popup-title">
					条件筛选
				</text>
				<van-icon @tap="handleClosePopup" name="cross" style="color: #000;"/>
			</view>
			
			<view class="popup-conter">
				<!-- 选择门店 -->
				<view class="items">
					<text class="items-title">选择门店</text>
					<view class="task-select">
						<picker
							mode="selector" 
							:range="selectorArray" 
							:value="selectedIndex" 
							@change="onPickerChange"
							>
							<view class="picker-text">{{ selectorArray[selectedIndex] }}</view>
						</picker>
					</view>
				</view>
				<!-- 任务类型 -->
				<view class="items">
					<text class="items-title">任务类型</text>
					<view class="task-select">
						<picker
							mode="selector" 
							:range="selectorArray" 
							:value="selectedIndex" 
							@change="onPickerChange"
							>
							<view class="picker-text">{{ selectorArray[selectedIndex] }}</view>
						</picker>
					</view>
				</view>
				<!-- 任务名称 -->
				<view class="items">
					<text class="items-title">任务名称</text>
					<view class="task-select">
						<input class="search-input" type="text" v-model="keyword" placeholder="请输入任务名称"></input>
					</view>
				</view>
				<!-- 车架号 -->
				<view class="items">
					<text class="items-title">车架号</text>
					<view class="task-select">
						<input class="search-input" type="text" v-model="keyword" placeholder="车架号填写"></input>
					</view>
				</view>
				<!-- 维系人员 -->
				<view class="items">
					<text class="items-title">维系人员</text>
					<view class="task-select">
						<picker
							mode="selector" 
							:range="selectorArray" 
							:value="selectedIndex" 
							@change="onPickerChange"
							>
							<view class="picker-text">{{ selectorArray[selectedIndex] }}</view>
						</picker>
					</view>
				</view>
				<!-- 任务时间 -->
				<view class="items">
					<text class="items-title">任务时间</text>
					<view class="task-select">
						<picker
							mode="date"
							:value="date1" 
							@change="handleDateChange"
							>
							<view class="picker-text">{{ date1 }}</view>
						</picker>
						<text class="select-text">至</text>
						<picker
							mode="date"
							:value="date2" 
							@change="handleDateChange2"
							>
							<view class="picker-text">{{ date2 }}</view>
						</picker>
					</view>
				</view>
				
			</view>
		
			<!-- 按钮 -->
			<view class="select-btn">
				<button @click="handleSelectBtn" size="default" type="default" class="btn">
					查询
				</button>
			</view>
		</view>
	</uni-popup>
	
</template>

<script>
	export defailt {
		data() {
			return {
				
			}
		},
		
		methods: {
			/**
			 * @function 关闭popup弹窗
			 */
			handleClosePopup() {
				this.$refs.popup.close()
			},
			onPickerChange(event) {
				this.selectedIndex = event.detail.value;
				console.log('选择的值为：', this.selectorArray[this.selectedIndex]);
			},
			handleDateChange(event) {
				console.log('选择的日期', event.detail.value)
				this.date1 = event.detail.value
			},
			handleDateChange2(event) {
				console.log('选择的日期', event.detail.value)
				this.date2 = event.detail.value
			},
			/**
			 * @function 查询按钮
			 */
			handleSelectBtn() {
				console.log('查询按钮')
				this.$refs.popup.close()
			},
		},
	}
</script>

<style lang="less" scoped>
	// 弹窗区域
	.popup-content {
		padding: 20px 12px;
		
		.popup-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;
			
			.popup-title {
				font-size: 16px;
				color: #333333;
				font-weight: 600;
			}
		}
		
		.popup-conter {
			.items {
				margin-bottom: 16px;
				.items-title {
					font-size: 16px;
					font-weight: 500;
				}
				
				.task-select {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					margin-top: 10px;
					padding: 8px 0;
					border-radius: 8px;
					text-align: center;
					background-color: #f2f2f2;
					
					.picker-text {
						font-size: 14px;
						font-weight: 400;
						color: #333333;
					}
					.search-input {
						font-size: 14px;
					}
					.search-input::placeholder {
						font-size: 14px;
					}
					
					.select-text {
						margin: 0 10px;
						color: #999999;
					}
					
				}
			}
		}
		
		.select-btn {
			margin-top: 30px;
			.btn {
				flex: 1;
				background-color: #C9000F;
				color: #fff;
				border-radius: 8px;
			}
		}
		
	}
	
</style>